% !Mode:: "TeX:UTF-8"

\chapter{项目开发过程问题、方法与反思}

\section{前端部分}
在前端进行项目实现过程中，我们主要遇到了 vue2 升级到 vue3 的问题、源代码错误问题、确认订单修改问题、
前后端接口对接问题。
\subsection{源代码错误问题}
问题描述：在样式设计部分，底部内容会被底部导航遮盖。

解决方式：发现源代码设计中是 margin-bottom，应该设置成为 paddingbottom 

反思：不能过于依赖源代码。

\subsection{vue2 升级到 vue3 问题}
问题描述：在项目实现过程中，因为 vue3 升级与 vue2 
语法不同而导致出现的问题可以总结为如下几类：
\begin{itemize}
    \item 	项目初期，正常启动代码后，在浏览器显示报错。
    \item	写除首页外第二个页面后，一直报错。
    \item	确认订单页面，无法通过过滤器过滤 01 显示“女士”“先生” 解决对策：针对上述问题，分别有如下解决方案。
    \item	在一开始，我下载的是 vue2，在 vue2 自动生成的 package.json 后才发现，下载成了 vue2。经过多次查找资料之后，我选择直接修改 package.json 中 dependencies 的版本号，然后使用”npm run build” 命令，进行依赖项的修改，修改项目配置至 vue3。后续，我根据 vue3 的语法，依次将 main.js 文件，vue.config.js 文件，/router/index.js 文件修改，修改完成后项目可以正常启动。
    \item	经过根据浏览器提示信息提醒，经过注释部分代码、在控制台输出等排查方式，发现是顶部导航栏在其他页面时，document 滚动条事件没有进行释放，导致出现问题。发现 document 滚动条事件在首页组件，在 destroyed() 函数里面设置为空，但经过查询之后发现，vue3 中已经将 destroyed() 函数弃用，需更换使用 unMounted() 函数，修改完成后，可正常显示。
    \item	查询之后发现，Filter() 函数被弃用，可以使用自定义过滤器函数，或者使用 computed 代替过滤器。
    
\end{itemize}

反思：在项目初期，知道会因为升级出现问题后，应该直接去官网查看具体语法区别、有哪些更新和弃用等；或者遇到问题，首先应该排查是否是升级导致的 bug，不应该一次次遗漏这个问题；项目实现过程中，我们
前期忽视了这个问题，导致相似的 bug 加大了解决 bug 的难度。

\subsection{前后端对接问题}
问题描述：项目后期前后端接口对接时，发现有些新实现的功能没有作用，原有的历史订单功能也产生了bug，甚至出现了无法登录的情况。

解决方式：我们多次测试，查看报错信息，讨论可能的原因。最后发现是前后端链接的端口名称错误，导致新功能无法实现。
后端代码修改了函数数据类型，与前端不一致，导致出现了原有功能的bug。最后经沟通修正后解决了问题，项目正常运转。

反思总结：负责前后端的成员应该加强沟通，各个接口代码也要遵循名称规范，形成良好的代码风格。

\section{后端部分}
\subsection{环境配置问题}
问题描述：在配置 tomcat 进行连接后，可以在 8080 端口连接到 tomcat 网站, 但是在命令行执行 startup.bat 指令便会输出许多警告。在打开服务器时，会出现报错端口号被占用的情况。

解决方式：首先我根据报错提示去排查 8080 端口号使用情况，但事实上并未发现任何进程使用 8080 端口。随后在执行 startup.bat 指令时发现有许多警告的输出，因为在配置时没有仔细查看输出详情错以为配置成功，仔细查看时才发现 tomcat 配置出现问题。因此我选择另外一个版本进行下载安装，重新进行环境的配置，解决了该问题。

\subsection{前后端对接问题}
问题描述：在前端实现页面支付的调用 createOrders 接口时，未发现数据库数据的修改情况。在这一问题上前后端同学各执一词：后端认为接口均通过测试，不可能出现接口错误问题；前端同学则介绍前端实现代码，同时也表示前端实现时正确无误的。

解决方式：通过前端同学的各种测试，发现并不是代码问题，而是接口设计
问题：后端同学设计了两个不同的接口 createOrders，updateOrders 供前端使用，但是前端只需使用 createOrders 即可，这个阶段不并涉及商品单价和用户地址的修改。而这个问题是由于后端同学实现接口时对前端调用接口实现页面跳转不清晰导致的，后续沟通后通过修改 createOrders 接口，摒弃 updateOrders 的方式解决该问题。

反思总结：这个接口是我在没有和前端同学沟通好的情况下实现的，这也是导致前端测试错误的根源。我在和前端同学沟通交流后，发现了前后端精准对接的重要性，否则实现功能将与预想中不同，甚至设置的接口也只是无用功。

\subsection{源代码调试错误问题}
问题描述：在阶段 3 项目的实现过程中，采用 postman测试 createOrders 端口时发现会有 sql 语句执行错误，导致订单添加失败。

解决方式：该接口实现了多个方法，以事务的形式完成对多个表达增删改查。通过 debug 设置断点方式，我找出是在哪部分执行时出的异常。最后发现是源代码通过 foodId 进行连接表，但是该属性并未赋值，导致全部查询为空，后续 insert 的 sql 语句便会报错。因为该属性未赋值，因此我采用通过 businessId 进行连接的方式，根据 foodId 和 businessId 一对一的特点进行连接再将其符合的结果进行筛选。同时增加判断对象是否为 null，保证即使是非法输入仍然能够通过判断选择是否执行，增强程序的鲁棒性。

反思总结: 在这个部分我个人太依赖于视频讲授内容，在 sql 语句的书写上也没有考虑太多上下文逻辑，在原视频中作者也没有实际进行调试。这也让我更加具有批判性思维，即使对于正在学习的知识，也需要有自己的见解而不是一昧地学习。

\section{总结}

在项目开发过程中，我们事先缺乏对于这个微型“饿了么”项目开发的前后端相关知识，处于一个边学边做的状态，所以项目开发过程显得很艰难。
我们小组也缺乏项目开发的经验，项目初期完成项目需求时，重点有所偏差，项目开发进程安排也有漏洞，部分需求仍然存在模糊或遗漏的情况。
项目测试阶段也存在疏漏，到最后的展示阶段还存在未发现的bug。这使我们意识到一个良好的项目规划和项目测试对整个项目的开发是多么重要。


在项目开发合作方面，我们也有许多不足之处。项目的前后端密切联系，前后端同学应加强沟通，
这样有助于减少前后端接口连接bug的产生，也减少了解决bug所花费的精力。

通过这次“饿了么”项目的开发，我们也稍微体验到了软件工程项目开发的流程，我们对项目开发有了更深刻的理解，
也从这次项目开发中获得了相应的经验。